<template>
  <div>
    <Form ref="formInline" :model="searchData" inline :label-width="90">
      <FormItem label="姓名:">
        <Input type="text" v-model="searchData.realname" />
      </FormItem>
      <FormItem label="手机号:">
        <Input type="text" v-model="searchData.mobile" />
      </FormItem>
      <Button type="primary" @click="search()">搜索</Button>
      <Button @click="reset()" style="margin-left: 10px;">重置</Button>
    </Form>

    <Table :columns="columns" :data="list" @on-sort-change="customSort" @on-select="rowSelect" @on-select-all="allSelect"
      @on-select-cancel="rowSelectCancel" size="small" :highlight-row="true" max-height="800" border stripe>
      <template slot-scope="{ row , index}" slot="createTimeSlot">
        <Tooltip :content="row.reg_location" placement="top">
          <span>{{ row.create_time }}</span>
        </Tooltip>
      </template>
      <template slot-scope="{ row , index}" slot="regSlot">
        <Tooltip :content="row.location" placement="top">
          <span>{{ row.last_login_time }}</span>
        </Tooltip>
      </template>
      <template slot-scope="{ row , index}" slot="statusSlot">
        <i-switch :value="!!row.status" @on-change="statusChange(row.user_id, !row.status)" />
      </template>
      <template slot-scope="{ row , index}" slot="makeSlot">
        <Tooltip content="好友列表" style="margin-left: 10px;" placement="top">
          <Icon type="ios-contacts-outline" size="24" color="#19be6b" style="cursor: pointer;"
            @click="showFriend(row.user_id)" />
        </Tooltip>
        <Tooltip content="编辑" style="margin-left: 10px;" placement="top">
          <Icon type="md-color-filter" size="24" color="#2d8cf0" style="cursor: pointer;" @click="editUser(row)" />
        </Tooltip>
        <Tooltip content="删除" style="margin-left: 10px;" placement="top">
          <Icon type="md-trash" size="24" color="#ed4014" style="cursor: pointer;" @click.stop="del(row.user_id)" />
        </Tooltip>
      </template>
    </Table>

    <Paginate :total="total" @on-change="changePage" @on-page-size-change="changeSize">
    </Paginate>

    <!-- 编辑 -->
    <Modal v-model="editUserModal" title="用户信息" @on-ok="editUserModalOk">
      <Form :model="formUserItem" :label-width="80">
        <FormItem label="账号">
          <Input v-model="formUserItem.account"></Input>
        </FormItem>
        <FormItem label="手机号">
          <Input v-model="formUserItem.mobile"></Input>
        </FormItem>
        <FormItem label="姓名">
          <Input v-model="formUserItem.realname"></Input>
        </FormItem>
        <FormItem label="性别">
          <RadioGroup v-model="formUserItem.sex">
            <Radio label="2" border>未知</Radio>
            <Radio label="0" border>女</Radio>
            <Radio label="1" border>男</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="角色">
          <RadioGroup v-model="formUserItem.role_id">
            <Radio :label="value.id" border v-for="value in roleList" :key="value.id">{{ value.role_name }}</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="状态">
          <RadioGroup v-model="formUserItem.status">
            <Radio label="1" border>正常</Radio>
            <Radio label="0" border>禁用</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="备注">
          <Input v-model="formUserItem.remark" type="textarea"></Input>
        </FormItem>
      </Form>
    </Modal>

    <!-- 好友列表 -->
    <Modal v-model="showFriendModal" title="好友列表" :width="60">
      <Table :columns="friendColumns" :data="friendList" size="small" :highlight-row="true" max-height="800" border
        stripe>
        <!-- <template slot-scope="{ row , index}" slot="makeSlot">
          <Tooltip content="好友列表" style="margin-left: 10px;" placement="top">
            <Icon type="ios-paper-outline" size="24" color="#19be6b" style="cursor: pointer;"
              @click="showFriend(row.id)" />
          </Tooltip>
        </template> -->
      </Table>
      <Paginate :total="friendTotal" @on-change="changePage1" @on-page-size-change="changeSize1">
      </Paginate>
    </Modal>
  </div>
</template>

<script>
import Paginate from "@/components/paginate/paginate.vue";
export default {
  name: "userList",
  components: {
    Paginate,
  },
  data() {
    return {
      searchData: {
        sort: "desc",
        order_by: "user_id",
        role_id:0,
        page: 1,
        limit: 10
      },
      // 列表
      columns: [
        // {
        //   type: 'selection',
        //   width: 60,
        //   align: 'center'
        // },
        {
          title: 'ID',
          align: 'center',
          key: 'user_id',
          sortable: 'custom',
        },
        {
          title: '姓名',
          align: 'center',
          key: 'realname',
          sortable: 'custom',
        },
        {
          title: '账号',
          align: 'center',
          key: 'account',
          sortable: 'custom',
        },
        {
          title: '手机号',
          align: 'center',
          key: 'mobile',
          sortable: 'custom',
        },
        {
          title: '性别',
          align: 'center',
          key: 'sex_name',
          sortable: 'custom',
        },
        {
          title: '角色',
          align: 'center',
          key: 'role_name',
          sortable: 'custom',
        },
        {
          title: '注册时间',
          align: 'center',
          key: 'create_time',
          sortable: 'custom',
          slot: "createTimeSlot"
        },
        {
          title: '最后登录时间',
          align: 'center',
          key: 'last_login_time',
          sortable: 'custom',
          slot: "regSlot",
        },
        {
          title: '备注',
          key: 'remark',
          align: 'center',
          sortable: 'custom',
        },
        {
          title: '状态',
          key: 'status',
          align: 'center',
          sortable: 'custom',
          slot: "statusSlot",
        },
        {
          title: '操作',
          align: 'center',
          slot: 'makeSlot',
        },
      ],
      // 数据
      list: [],
      total: 0,
      // 编辑框
      editModal: false,
      formItem: {
        coupon_id: 0
      },
      editUserModal: false,
      formUserItem: {},
      roleList: [],
      // 好友列表
      searchData1:{
        user_id:0,
      },
      showFriendModal: false,
      friendColumns:[
        {
          title: '好友ID',
          align: 'center',
          key: 'friend_user_id',
          sortable: 'custom',
        },
        {
          title: '好友名称',
          align: 'center',
          key: 'friend_user_name',
          sortable: 'custom',
        },
        {
          title: '好友备注',
          align: 'center',
          key: 'nickname',
          sortable: 'custom',
        },
      ],
      friendTotal:0,
      friendList:[],
    }
  },
  methods: {
    // 查询管理员信息
    getList() {
      let params = {
        ...this.searchData,
      };
      this.$axios('/admin/service/getUserList', params).then(res => {
        this.list = res.data;
        this.total = res.total;
      });
    },
    search() {
      this.searchData.page = 1;
      this.getList();
    },
    reset() {
      this.searchData.page = 1;
      this.searchData.order_by = "";
      this.searchData.sort = "";
      this.searchData.role_id = 0;
      this.getList();
    },
    changePage(page) {
      this.searchData.page = page;
      this.getList();
    },
    changeSize(size) {
      this.searchData.limit = size;
      this.getList();
    },
    changePage1(page) {
      this.searchData1.page = page;
      this.getFriendList();
    },
    changeSize1(size) {
      this.searchData1.limit = size;
      this.getFriendList();
    },
    editModalOk() {
      let params = {
        ...this.formItem,
      };
      this.$axios('/admin/member/moveUser', params).then(res => {
        this.$Message.success('执行成功');
        this.getList();
      });
    },
    getUserLevelArr() {
      this.$axios('/admin/member/getUserLevelArr').then(res => {
        this.userLevelList = res;
      });
    },
    edit(row) {
      this.formItem.id = row.id;
      this.editModal = true;
    },
    editUser(row) {
      this.getRoleList();
      this.formUserItem = { ...row };
      this.formUserItem.sex = this.formUserItem.sex + '';
      this.formUserItem.status = this.formUserItem.status + '';
      this.editUserModal = true;
    },
    editUserModalOk() {
      let params = {
        ...this.formUserItem,
      };
      this.$axios('/admin/member/editUser', params).then(res => {
        this.$Message.success('执行成功');
        this.getList();
      });
    },
    del(id) {
      this.$axios('/admin/member/delUser', { id: id }).then(res => {
        this.$Message.success('执行成功');
        this.getList();
      });
    },
    customSort(column, key, order) {
      this.searchData.order_by = column.key;
      this.searchData.sort = column.order;
      this.getList();
    },
    rowSelect(selection, row) {
      this.sendType = 0;
      this.sendCouponUidArr = [];
      selection.forEach(element => {
        this.sendCouponUidArr.push(element.id)
      });
    },
    rowSelectCancel(selection, row) {
      this.sendType = 0;
      this.sendCouponUidArr = [];
      selection.forEach(element => {
        this.sendCouponUidArr.push(element.id)
      });
    },
    allSelect() {
      this.sendType = 1;
    },
    sendCoupon() {
      if (this.sendType == 0 && this.sendCouponUidArr.length == 0) {
        this.$Message.error('请选择要发放的用户');
        return;
      }
      this.getCouponList();
      this.selectCouponModal = true;
    },
    getCouponList() {
      this.$axios('/admin/member/getCouponList').then(res => {
        this.couponList = res;
      });
    },
    selectCouponModalOk() {
      this.$axios('/admin/member/sendCoupon', { send_type: this.sendType, user_ids: this.sendCouponUidArr, coupon_id: this.formItem.coupon_id }).then(res => {
        this.$Message.success('发放成功');
        this.getList();
      });
    },
    // 启用，禁用
    statusChange(id, status) {
      this.$axios("/admin/user/setUserStatus", { id: id, status: status }).then(res => {
        this.getList();
      });
    },
    // 获取角色列表
    getRoleList() {
      this.$axios("/admin/role/getSelfAndNextRoleList").then(res => {
        this.roleList = res;
      });
    },
    // 好友列表
    showFriend(id) {
      this.searchData1.user_id = id;
      this.getFriendList();
      this.showFriendModal = true;
    },
    getFriendList(){
      this.$axios("/admin/user/getUserFriendList",this.searchData1).then(res => {
        this.friendTotal = res.total;
        this.friendList = res.data;
      });
    },
  },
  created() {
    this.getList();
  }
}
</script>
<style></style>
